﻿<html><head>
		<title>Demo display info when mouse move on a pic</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <style type="text/css">
		.tiptext {
                background:#ccc;
                border: 1px #333 solid;
                padding:5px;
                width:100px;
            }
            .description {
                display:none;
                position:absolute;
                border:1px solid #000;
                width:400px;
                height:400px;
            }
		</style>

        


</head>
	<body leftmargin="0" topmargin="0">
		<img border="0" src="http://www.net-a-porter.com/alfresco/nap/webAssets/magazine/issues/issue_262/final_touch/common/page_1/productsBG.jpg?v=0.3" usemap="#map">
        <map name="map">
            <area class="tiptext" shape="circle" coords="587, 99, 86" alt="specifies the alternative text.11111">
            <div class="description"> Here is the big fat description box</div>
            
            <area shape="circle" coords="777, 156, 90" title="1222222222" alt="">
            <area shape="circle" coords="634, 270, 77" title="222222222" alt="">
            <area shape="circle" coords="575, 437, 76" title="2222222222" alt="">
            <area shape="circle" coords="769, 501, 81" title="3222222222" alt="">
	    </map>
    <script type="text/javascript">
        //            $(".tiptext").mouseover(function () {
        //                $(this).children(".description").show();
        //            }).mouseout(function () {
        //                $(this).children(".description").hide();
        //            });
        $(function () {
            $(".tiptext").mouseover(function () {
                $(this).children(".description").show();
            }).mouseout(function () {
                $(this).children(".description").hide();
            });
        });
        </script>
</body></html>